

<template>
  <div class="indexBox">
    <ImitateNav v-model="currentNav"></ImitateNav>
    <a-col :md="24" style="margin-top:20px">
      <!-- 左侧菜单 -->
      <a-col :md="5" class="navLeft">
        <a-col :md="24" class="navLeftTop-a">组织架构</a-col>
        <a-col :md="24" class="navLeftTop-b">部门</a-col>
        <a-col :md="24">
          <div class="table-page-search-wrapper" style="padding:10px 5px">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="18" :sm="24">
                  <a-form-item label>
                    <a-input-search v-model="queryParam.memberId" placeholder="请输入角色名称/代码" />
                  </a-form-item>
                </a-col>

                <a-col :md="(!advanced && 6) || 24" :sm="24" style="padding:0">
                  <span>
                    <!-- <a-button type="primary" @click="loadDataRefresh()">搜索</a-button> -->
                    <a-button type="primary" @click="loadDataRefresh()">导入</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-col>

        <a-col :md="24">
          <a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand">
            <a-tree-node key="0-0" title="安布雷拉生物科技">
              <a-tree-node key="0-0-0" title="商务中心（200）" is-leaf />
              <a-tree-node key="0-0-1" title="龙华商务（10）" is-leaf />
            </a-tree-node>
            <a-tree-node key="0-1" title="研发中心">
              <a-tree-node key="0-1-0" title="IT部门" is-leaf />
              <a-tree-node key="0-1-1" title="福田商务（10）" is-leaf />
            </a-tree-node>
            <a-tree-node key="0-2" title="安布雷拉生物科技">
              <a-tree-node key="0-2-0" title="商务中心（200）" is-leaf />
              <a-tree-node key="0-2-1" title="龙华商务（10）" is-leaf />
            </a-tree-node>
            <a-tree-node key="0-3" title="研发中心">
              <a-tree-node key="0-3-0" title="IT部门" is-leaf />
              <a-tree-node key="0-3-1" title="福田商务（10）" is-leaf />
            </a-tree-node>
          </a-directory-tree>
        </a-col>
      </a-col>

      <!-- 右侧菜单 -->
      <a-col :md="18">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1">
            <span slot="tab">组织成员</span>
            <dataB></dataB>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">基本信息</span>
            <dataA></dataA>
          </a-tab-pane>
          <a-tab-pane key="3">
            <span slot="tab">修改记录</span>
            <dataC></dataC>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-col>
  </div>
</template>

<script>
import moment from 'moment'
import ImitateNav from '@/components/_ImitateNav/ImitateNav'
import dataA from '@/views/organization/module/data-a'
import dataB from '@/views/organization/module/data-b'
import dataC from '@/views/organization/module/data-c'
import { STable, Ellipsis } from '@/components'

import { putAction, postAction, getAction } from '@/api/manage'
import DataC from './module/data-c.vue'
const columns = [
  {
    title: '序号',
    align: 'center',
    width: '80px',
    dataIndex: 'member.id',
  },
  {
    title: '角色代码',
    dataIndex: 'createTime',
    width: '180px',
    align: 'center',
  },
  {
    title: '角色名',
    dataIndex: 'email',
    width: '180px',
    align: 'center',
  },
  {
    title: '描述',
    dataIndex: 'address',
    ellipsis: true,
    width: '250px',
    align: 'center',
  },
]

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    ImitateNav,
    dataA,
    dataB,
    dataC,
  },
  data() {
    this.columns = columns
    return {
      currentNav: '组织管理',
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: { keywords: '', certifiedBusinessStatus: '', startTime: '', endTime: '', memberId: '' },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({ sort: 'createTime,desc' }, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return getAction('/api/businessAuthApply', requestParameters).then((res) => {
          return {
            ...requestParameters,
            totalCount: res.result.totalElements,
            totalPage: 10,
            data: res.result.content,
          }
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
    }
  },

  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    },
  },
  methods: {
    callback(key) {
      console.log(key)
    },
    handleChange(value) {
      // this.queryParam.clientType = value
      console.log(this.queryParam.clientType)
      this.loadDataRefresh()
    },

    lookLink(record) {
      console.log(record)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    loadDataRefresh() {
      this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
    },
    onSelect(keys, event) {
      console.log('Trigger Select', keys, event)
    },
    onExpand() {
      console.log('Trigger Expand')
    },
  },
}
</script>
<style  lang="less">
.navLeft {
  background-color: #fff;
  height: 800px;
  margin-right: 12px;
  .navLeftTop-b {
    background: #ececec;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    padding: 0 0 0 15px;
    text-align: center;
    color: #fff;
    background-color: #2175ff;
    text-align: center;
    font-family: Source Han Sans SC;
    font-weight: 500;
  }
}

.mt20 {
  margin-top: 20px !important;
}
</style>
